<template>
	<view class="pageIndex">
		<index-header :isSystemDot="isSystemDot" :isUserDot="isUserDot" :count="count"></index-header>
		<u-gap height="100" bg-color="#22a3ff"></u-gap>
		<view class="total_count">
			<view class="total_item">
				<text class="title">设备总数</text>
				<text class="number">{{total}}</text>
			</view>
			<view class="total_item">
				<text class="title">实时故障</text>
				<text class="number">{{badDeviceTotal}}</text>
			</view>
		</view>
		<index-main :list="userMoreList" @click="toPage"></index-main>
		<index-main :list="deviceList" @click="toPage"></index-main>
		<!-- <u-tabbar :list="tabList" :mid-button="true" @change="tabChange"></u-tabbar>
		<index-main :list="deviceList"></index-main> -->
		<u-tabbar :list="tabList" icon-size="56rpx" height="60px" :mid-button="true" @change="tabChange"></u-tabbar>
	</view>
</template>

<script>
	import indexHeader from './components/index-header.vue'
	import indexMain from './components/index-main.vue'
	export default {
		components: {
			indexHeader,
			indexMain
		},
		data() {
			return {
				total: '39',
				badDeviceTotal: '9',
				userMoreList: {
					title: '常用功能',
					list: [{
							icon: '/static/images/index/car.png',
							name: '地图找车',
							event: 'carMap'
						},
						{
							icon: '/static/images/index/repairs.png',
							name: '报修',
							event: 'reportRepair'
						},
						{
							icon: '/static/images/index/audit.png',
							name: '审核',
							event: 'orderAudit'
						},
						{
							icon: '/static/images/index/QA.png',
							name: 'QA问答',
							event: 'QA'
						},
						{
							icon: '/static/images/index/work.png',
							name: '快速工单',
							event: 'quikOrder'
						},
						{
							icon:'/static/images/index/polling.png',
							name:'巡检',
							event:'patrol',
							hasDots:5
						}
					]
				},
				deviceList: {
					title: '设备管理',
					list: [{
							icon: '/static/images/index/equipment.png',
							name: '设备管理',
							event: 'deviceManage'
						},
						{
							icon: '/static/images/index/pending.png',
							name: '待处理',
							event: 'deviceUnResolve'
						},
						{
							icon: '/static/images/index/awaiting.png',
							name: '待维修',
							event: 'deviceUnRepair'
						},
						{
							icon: '/static/images/index/repaired.png',
							name: '已修好',
							event: 'deviceFixed'
						}
					]
				},
				bgTextStyle: 'dark',
				scrollTop: '200rpx',
				bgColor: '#ff0000',
				bgColorTop: '#00ff00',
				bgColorBottom: '#0000ff',
				nbTitle: '标题',
				nbLoading: false,
				nbFrontColor: '#000000',
				nbBackgroundColor: '#ffffff',
				isSystemDot: true,
				isUserDot: false,
				count: 2,
				show: false,
				keyword: '',
				noticeCount: 1,
				deviceCount: 0, //设备总数
				realTimeFault: 0, //实时故障
				functionList: [{
						icon: 'map',
						name: '地图找车'
					},
					{
						icon: 'car-fill',
						name: '报修'
					},
					{
						icon: 'car-fill',
						name: '审核'
					},
					{
						icon: 'car-fill',
						name: 'QA问答'
					},
					{
						icon: 'car-fill',
						name: '快速工单'
					},
				],
				deviceManage: [{
						icon: 'map',
						name: '设备管理'
					},
					{
						icon: 'car-fill',
						name: '待接单'
					},
					{
						icon: 'car-fill',
						name: '待执行'
					},
					{
						icon: 'car-fill',
						name: '维修中'
					},
				],
				tabList: [],
				loading: true,
			}
		},
		// 如果想一进入页面就打开键盘，请在此生命周期调用
		created() {

		},
		onReady() {
			this.show = true;
		},

		onLoad() {
			this.tabList = this.$store.state.vuex_tabBar
			setTimeout(() => {
				this.loading = false;
			}, 1000)
		},
		onShow() {
			this.$nextTick(function() {
				// this.$u.api.forum.forumCategory().then(res => {
				// 	console.log(res);
				// })
			})
		},
		methods: {
			toPage(e) {
				switch (e) {
					case 'reportRepair':
						this.$u.route('/pages/reportRepair/index');
						break;
					case 'carMap':
						this.$u.route('/pages/mapCar/index')
						break;
					case 'orderAudit':
						this.$u.route('/pages/examine/examine')
						break;
					case 'QA':
						this.$u.route('/pages/helpCenter/index')
						break;
					case 'quikOrder':
						this.$u.route('/pages/quikWorkSheet/index')
						break;
					case 'patrol':
						this.$u.route('/pages/patrol/index')
						break;
					case 'deviceManage':
						this.$u.route('/pages/deviceManage/index')
						break;
					case 'deviceUnResolve':
						this.$u.route('/pages/deviceWorkSheet/index', {
							title: '待处理',
							pageType: 0
						})
						break;
					case 'deviceUnRepair':
						this.$u.route('/pages/deviceWorkSheet/index', {
							title: '待维修',
							pageType: 1
						})
						break;
					case 'deviceFixed':
						this.$u.route('/pages/deviceWorkSheet/index', {
							title: '已修好',
							pageType: 2
						})
						break;
				}
			},
			toNotice() {},
			toFunction(index) {
				switch (index) {
					case 1:
						this.$u.route('/pages/mapCar/index')
						break
				}
			},
			onSearch(key) {
				console.log('search key=====', key)
			},
			toDevice() {},
			tabChange(index) {
				if (index === 1) {
					console.log('beforeSwitch index=====', index)
					this.$u.route('/pages/reportRepair/index');
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.pageIndex {
		width: 100vw;
		// height: 100vh;
		background-color: #f5f5f5;
		height: 100vh;
	}

	.menu {
		margin: 20rpx 0;
	}

	.total_count {
		background-color: #22a3ff;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.total_item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			z-index: 99;
			margin: 40rpx 0 50rpx 0;

			.title {
				font-size: 28rpx;
				letter-spacing: 2rpx;
				margin-bottom: 10rpx;
				color: #fff;
			}
			.number {
				font-size: 48rpx;
				font-weight: bold;
				letter-spacing: 2rpx;
				color: #fff;
			}
		}
	}


	::v-deep .u-tabbar__content__item__text {
		bottom: 6rpx !important;
		font-size: 24rpx !important;
	}

	::v-deep .u-section__title__text {
		margin-left: 10rpx;
	}
</style>
